<template>
  <div>
    <Title title="一级IT云基础资源" />
    <Panel>
      <div ref="chart"></div>
    </Panel>
  </div>
</template>
<script>
import Panel from "../components/Panel";
import Title from "../components/Title";
import { Chart } from "@antv/g2";

export default {
  name: "UserPanel",
  components: {
    Panel,
    Title,
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const data = [
        { year: "1951 年", sales: 38 },
        { year: "1952 年", sales: 52 },
        { year: "1956 年", sales: 61 },
        { year: "1957 年", sales: 145 },
        { year: "1958 年", sales: 48 },
        { year: "1959 年", sales: 38 },
        { year: "1960 年", sales: 38 },
        { year: "1962 年", sales: 38 },
      ];
      const chart = new Chart({
        container: this.$refs.chart,
        autoFit: true,
        height: 200,
      });

      chart.data(data);
      chart.scale("sales", {
        nice: true,
      });

      chart.tooltip({
        showMarkers: false,
      });
      chart.interaction("active-region");

      chart.interval().position("year*sales");

      chart.render();
    },
  },
};
</script>
